<!-- src/views/outbound/packing/display.vue -->
<script setup>
import { ref, computed, onMounted } from 'vue'

defineProps({
  row: {
    type: Object,
    default: () => ({})  // 默认为空对象，避免 undefined
  }
})

const form = ref({
  quantity: 0
})

// // 初始化数量为待打包数量
// const initQuantity = computed(() => {
//   return row?.pendingPackQuantity || 0
// })
const initQuantity = ref(null)

onMounted(() => {
  form.value.quantity = initQuantity.value
})
</script>

<template>
  <div style="padding: 20px;">
    <h3>打包</h3>
    <el-form :model="form" label-width="80px">
      <!-- 商品名称 -->
      <el-form-item label="商品名称">
        <el-input :value="row?.title" disabled />
      </el-form-item>

      <!-- 商品编码 -->
      <el-form-item label="商品编码">
        <el-input :value="row?.code" disabled />
      </el-form-item>

      <!-- 规格编码 -->
      <el-form-item label="规格编码">
        <el-input :value="row?.specCode" disabled />
      </el-form-item>

      <!-- 数量 -->
      <el-form-item label="数量">
        <el-input-number v-model="form.quantity" :min="1" :max="row?.pendingPackQuantity || 0" />
      </el-form-item>
    </el-form>

    <div style="text-align: right; margin-top: 20px;">
      <el-button @click="$emit('close')">关闭</el-button>
      <el-button type="primary" @click="$emit('submit', form.quantity)">提交</el-button>
    </div>
  </div>
</template>